<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Happy Birthday!!! :)</title>
  <link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400" rel="stylesheet">
  <link rel="shortcut icon" type="image/png" href="img/favicon.png" />
  <link rel="stylesheet" href="style/style.css">
</head>

<body>
  <div class="container">
    <div class="one">
      <h1 class="one">Hey
        <span id="name">社会强</span>
      </h1>
      <p class="two" id="greetingText">沉寂工地的韩国施工员 !</p>
    </div>
    <div class="three">
      <p>生 日 快 乐!!! :D</p>
    </div>
    <div class="four">
      <div class="text-box">
        <p class="hbd-chatbox">祝你生日快乐!! 愿你每天都有果盘吃...</p>
        <p class="fake-btn">发送</p>
      </div>
    </div>
    <div class="five">
      <p class="idea-1">在这特别的日子里</p>
      <p class="idea-2">我意识到</p>
      <p class="idea-3">我想做点什么
        <strong>特别的</strong>.</p>
      <p class="idea-4">因为,</p>
      <p class="idea-5">你 特 别 帅
        <span>:)</span>
      </p>
      <p class="idea-6">
        <span>所</span>
        <span>以</span>
      </p>
    </div>
    <div class="six">
      <img src="img/user.jpg" alt="" class="lydia-dp" id="imagePath">
      <img src="img/hat.svg" alt="" class="hat">
      <div class="wish">
        <h3 class="wish-hbd">生 日 快 乐 !</h3>
        <h5 id="wishText">祝愿我们的小强，早日开上兰博基尼，迎娶白富美 ;)</h5>
      </div>
    </div>
    <div class="seven">
      <div class="baloons">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon1.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon1.svg" alt="">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon1.svg" alt="">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon1.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon1.svg" alt="">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon1.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon1.svg" alt="">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon1.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon1.svg" alt="">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon1.svg" alt="">
        <img src="img/ballon3.svg" alt="">
      </div>
    </div>
    <div class="eight">
      <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" />
      </svg>
      <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" />
      </svg>
      <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" />
      </svg>
      <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" />
      </svg>
      <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" />
      </svg>
      <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" />
      </svg>
      <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" />
      </svg>
      <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" />
      </svg>
      <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" />
      </svg>
    </div>
    <div class="nine">
      <p>用我的方式表达的祝福，有点简陋，希望你能喜欢</p>
      <p id="replay">点击重新播放.</p>
      <p class="last-smile">:)</p>
    </div>
  </div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script type="application/javascript" src="script/main.js"></script>

</html>
